<template>
  <div>
<div class="content">
  <div class="float">
    <div class="content-left-sing">
      <!--子组件通知父组件修改-->
      <div class="image"
           @click="changedata">
        <img :src="imgUrl">
        <div class="number">
          播放量：{{number}}
        </div>
      </div>
      <div class="msg">
        {{msg}}
      </div>
    </div>
  </div>

  <div class="content-right">



  </div>
</div>

  </div>
</template>

<script>
export default {
  props:{
    imgUrl:{
      type:String,
      default:''
    },
    number:{
      type:Number,
      default: 0
    },
    msg:{
      type:String,
      default:''
    },
    listId:{
      type:Number,

    }

  },
  methods:{
    changedata(){
      this.$emit('changeNum',this.listId)
    }
  }

}
</script>

<style scoped>
html,body{
  padding: 0;
  margin: 0;
  width: 100%;
}
.content{
  padding: 0;
  margin: 0;
  width: 100%;
  background: whitesmoke;

}
/* .float{
  width: 100%;
 height: 100%;
  display: flex;
  flex-wrap:wrap;
  margin: 0 auto;
} */

.content-left-sing{
  margin-left:35px;
  margin-top:30px;
  height: 140px;

}
.image{
  width: 140px;
  height: 140px;
  position: relative;

}
.image img{
  width: 140px;
  height: 140px;
}
.number{
  width: 140px;
  height: 27px;
  background: rgba(0,0,0,0.5);
  position: absolute;
  bottom: 0;
  color: white;
}
.msg{
  width: 140px;
  height: 40px;
}


.content-right{

}

</style>